<template>
  <div>
    <div v-if="isShowDateAndTime" class="c-fs20 c-fc-gray" @click="openValidTimeDesc(0)">
      <i v-if="isShowIcon" class="iconfont c-fs20 c-mr4">&#xe70f;</i>
      <span>{{ getValidTimeText() }}</span>
      <span v-if="isShowValidTimeArrow" class="iconfont c-fs16 c-fc-gray c-lh20">&#xe635;</span>
    </div>
    <open-modal v-if="isShowModal" class="modal-class" :openModal="isShowValidTimeDesc" @closeModal="closeValidTimeDesc">
      <div v-if="effectiveProd" class="c-bg-white c-pt26 c-pb32 c-ph24 c-br-tr16 c-br-tl16 c-p c-minh360">
        <span @click="closeValidTimeDesc" class="iconfont c-fs16 c-fc-gray c-lh20 c-pa c-p-t30 c-p-r24">&#xe8fd;</span>
        <div class="c-fs30 c-fc-xblack c-textAlign-c">{{getProdTypeName(prodType, dataInfo.courseType || 0)}}课程有效期说明</div>
        <div class="c-fs22 c-fc-gray c-mt30">您购买了以下商品获得该{{getProdTypeName(prodType, dataInfo.courseType || 0)}}</div>
        <div class="c-flex-row c-pt30" @click="goDetail">
          <div class="c-ww210 c-maxh140 c-text-hidden c-p c-br8 c-flex-shrink0">
            <img class="c-w100 imgCloseBig c-br8" :src="$addXossFilter(effectiveProd.cover, require('../../../assets/defult270.png'))" />
            <div class="c-pa c-hh24 c-fs18 c-lh28 c-fc-white c-ph6 c-br-tl12  c-p-b0 c-p-r0 c-translucent-balck50" v-if="getProdTypeName(effectiveProd.prodType, effectiveProd.courseType || 0)">{{getProdTypeName(effectiveProd.prodType, effectiveProd.courseType || 0)}}</div>
          </div>
          <div class="c-flex-grow1 c-flex-column c-justify-sb c-fc-xblack c-pl20">
            <div class="c-fw600 c-fs24 c-text-ellipsis2">{{ effectiveProd.name }}</div>
            <div class="c-fs20 c-fc-gray">{{ getValidTimeText() }}</div>
          </div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
// import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
import OpenModal from "@/components/templates/common/openModal.vue";
export default {
  name: 'ValidTimeCom',
  components: {
    OpenModal
  },
  props: {
    dataInfo: {
      type: Object,
      default: () => {}
    },
    prodType: {
      type: Number,
      default: 0
    },
    prodId: {
      type: [Number, String],
      default: 0
    },
    isShowDateAndTime: {
      type: Boolean,
      default: true
    },
    isShowModal: {
      type: Boolean,
      default: true
    },
    isShowIcon: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      isShowValidTimeDesc: false,
      effectiveProd: null
    }
  },
  mounted() {
    this.isShowValidTimeDesc = false
    this.effectiveProd = this.dataInfo && this.dataInfo.effectiveProd ? this.dataInfo.effectiveProd : null;
  },
  computed: {
    isShowValidTimeArrow() {
      // 权限来源至本产品，不要弹窗
      return !!this.dataInfo && this.effectiveProd && this.prodId != this.effectiveProd.prodId && this.getValidTimeText();
    }
  },
  methods: {
    goDetail() {
      if (!(this.effectiveProd && this.effectiveProd.prodId)) {
        return
      }
      goDetails(this, this.effectiveProd.prodType, this.effectiveProd.prodId, '', (this.effectiveProd.courseType || 0));
    },
    getProdTypeName(prodType, courseType = 0) {
      if (prodType == 5) {
        const subProdTypeMap = {
          0: '视频',
          1: '音频',
          2: '图文',
        };
        return subProdTypeMap[courseType]
      } else {
        return global.prodMapType[prodType]
      }
    },
    openValidTimeDesc(type = 0) {
      if (!this.isShowValidTimeArrow) {
        return;
      }
      this.isShowValidTimeDesc = true;
      if (!type) {
        this.$emit('openValidTimeDesc')
      }
    },
    closeValidTimeDesc() {
      this.isShowValidTimeDesc = false;
    },
    // 训练营有效期
    getCampValidTimeText() {
      let campValidTimeText = '';
      if (this.dataInfo.isValid == 1 || (this.dataInfo.validAt && this.dataInfo.validAt == '9999-12-31 23:59:59')) {
        campValidTimeText = `长期有效`
      } else if (this.dataInfo.isValid == 2 && this.dataInfo.validAt) {
        campValidTimeText = `有效期至${this.dataInfo.validAt}`
      } else if (this.dataInfo.isValid == 0 && this.dataInfo.expireTime && this.dataInfo.isEnroll) {
        campValidTimeText = `有效期至${this.dataInfo.expireTime}`
      } else if (this.dataInfo.isValid == 0 && this.dataInfo.validTime && !this.dataInfo.isEnroll) {
        campValidTimeText = `${this.dataInfo.validTime}天有效`
      }
      return campValidTimeText
    },
    getExpireTimeText(isOnlyShowDate = true) {
      let expireTime = this.dataInfo.expireTime || this.dataInfo.expireAt;
      // expireTime为空并且有对应的权限生效产品，则是长期有效
      return expireTime ? `有效期至${isOnlyShowDate ? expireTime.split(" ")[0] : expireTime}` : (this.effectiveProd ? `长期有效` : '');
    },
    getValidTimeText() {
      // 训练营有效期优化后，统一用 expireTime作为有效期判断。validAt是指定有效日期，在购买后也会算出最新的 expireTime
      let validTimeText = '';
      // 训练营、公开课直播、社群需要展示日期+时间，其余只展示日期
      let isOnlyShowDate = ![10, 51, 78].includes(Number(this.prodType));
      // if (this.prodType == global.ckFrom.camp) {
      //   validTimeText = this.getCampValidTimeText();
      // } else
      if ([8, 10, 51].includes(Number(this.prodType))) {
        // 产品本身没有有效期，只是加入到专栏、知识套餐等产品中，才有所谓的有效期，所以需要另外计算
        validTimeText = this.getExpireTimeText(isOnlyShowDate);
      } else if (this.dataInfo.hasPermission == true && (this.dataInfo.validAt && this.dataInfo.validAt == '9999-12-31 23:59:59')) { // 产品VIP免费，vip、svip永久的情况
        validTimeText = `长期有效`
      } else if (this.dataInfo.hasPermission == true && (this.dataInfo.permissionType == 2 || this.dataInfo.permissionType == 3 || this.dataInfo.permissionType == 19) && this.dataInfo.isValid == 2 && this.dataInfo.validAt) {
        validTimeText = `有效期至${isOnlyShowDate ? this.dataInfo.validAt.split(" ")[0] : this.dataInfo.validAt}`
      } else if (this.dataInfo.hasPermission == true && !this.dataInfo.expireTime) {
        validTimeText = `长期有效`
      } else if (this.dataInfo.hasPermission == true && this.dataInfo.expireTime) {
        validTimeText = `有效期至${isOnlyShowDate ? this.dataInfo.expireTime.split(" ")[0] : this.dataInfo.expireTime}`
      } else if (this.dataInfo.hasPermission == false && this.dataInfo.isValid == 1) {
        validTimeText = `长期有效`
      } else if (this.dataInfo.hasPermission == false && this.dataInfo.isValid == 0 && this.dataInfo.validTime) {
        validTimeText = `${this.dataInfo.validTime}天有效`
      } else if (this.dataInfo.isValid == 2 && this.dataInfo.validAt) {
        validTimeText = `有效期至${isOnlyShowDate ? this.dataInfo.validAt.split(" ")[0] : this.dataInfo.validAt}`
      }
      return validTimeText;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.modal-class {
  position: fixed !important;
  z-index: 100000 !important;
}
</style>
